<template>
   <div class="modal-song" v-show="modalValue" ref="modalSong">
     <div class="standard-container">
       <div class="standard-grid --padding-horizontal --auto-rows">
         <div class="modal-song__content">
           <play-song-portrait :imgs="songs && songs.imgUrl"></play-song-portrait>
           <play-song-course></play-song-course>
           <play-song-pause></play-song-pause>
           <play-song-order></play-song-order>
		    <div class="modal-song__name">{{songs && songs.songName}}</div>
			<audio :src="songs && songs.url" autoplay></audio>
           <div class="modal-song__close" @click="close">
              <span></span>
              <span></span>
           </div>
         </div>
       </div>
     </div>
   </div>
</template>

<script lang="ts">
 
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { Prop,Watch } from 'vue-property-decorator'
  import PlaySongPortrait from './play-song-portrait'
  import PlaySongPause from './play-song-pause.vue'
  import PlaySongOrder from './play-song-order.vue'
  import PlaySongCourse from  './play-song-course'
  import {Actions,Store} from "../../enums/Store";
  import {State} from "vuex-class";
  import {SkinInterface,ModalInterface,currentSongsInterface} from "../../interfaces/PageInterface";
  @Component({
    components:{
      PlaySongOrder,
      PlaySongPause,
      PlaySongPortrait,
      PlaySongCourse
    }
  })
  export default class PlaySong extends Vue {
       @State(Store.Skin) skinValue:SkinInterface[Store.Skin]
       @State(Store.IsModal) modalValue:ModalInterface[Store.IsModal]
	   @State(Store.CurrentSongs) currentSongs:currentSongsInterface[Store.CurrentSongs]
	   private songs = {};
       private themes=[{
        value:'0',
        background:'linear-gradient(to right, rgb(5, 69, 71), rgb(96, 98, 102))'
      },{
        value:'1',
        background: 'linear-gradient(to right, rgb(95, 86, 54), rgb(96, 98, 102))'
      },{
        value:'2',
        background:'linear-gradient(to right, rgb(116, 3, 73), rgb(96, 98, 102))'
      },{
        value:'3',
        background:'linear-gradient(to right, rgb(0, 0, 0), rgb(96, 98, 102))'
      }
      ]

      private close(){
		  this.$store.dispatch(Actions.GetIsModal,false)
      }

      private  mounted(){
        this.themes.map((item,index)=>{
          if(item.value == this.skinValue){
            this.$refs.modalSong.style.background=item.background
          }
        })
	 
      }
	  
	  @Watch("currentSongs")
	   getSongs(newVal: object) {
	      console.log(newVal)
		  this.songs = newVal
	    }
	 

  }
  
</script>

<style lang="scss">

  @include component(modal-song){
    background: linear-gradient(to right, rgb(5, 69, 71), rgb(96, 98, 102));

    @include loop-breakpoints{
      height:#{ $gridel-row-height * 7 + rem };
    }

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: $color-fff;

    @include part(content){
        grid-column: 1 / 2 span;
        height: $mobile-row-7;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;

    }
	
	@include part(name){
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border: 1px solid red;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-bottom: 10px;
		padding-left: 90px;
		pointer-events: none;
	}

    @include part(close){
      padding-top: $mobile-row-1;

      span{
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        margin-bottom: 5px;
        transition: all 1s;
        -webkit-transition: all 0.6s;
        transform-origin: 6px center;

        &:nth-of-type(1){
          transform: rotate(45deg);
        }

        &:nth-of-type(2){
          transform: rotate(-45deg);
        }


      }
    }
  }

</style>
